<!doctype html>
<html><head>
	<meta charset="utf-8">
	<title>[(${dto.menu.title})]</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	
	<!-- jQuery-->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- common -->
	<link rel="stylesheet" href="/static/admin/css/common.css" media="all" />
	<script type="text/javascript" src="/static/admin/js/common-grid.js?v=b"></script>
	<link rel="stylesheet" href="/static/admin/css/mini-ease.css" media="all" />
	
	<!-- layui-->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
</head>
<body style="padding: 10px 0 0 10px;">
	<div class="layui-tab layui-tab-brief" style="background-color: #fff;">
		<ul class="layui-tab-title">
			<li class="layui-this" data-type="one" data-type-one-tab="year">销售年表</li>
			<li data-type="one" data-type-one-tab="month">销售月表</li>
			<li data-type="one" data-type-one-tab="day">销售日表</li>
		</ul>
		<div class="layui-tab-content">
			<div class="layui-tab-item layui-show" data-type-one-content="year">
				<div class="layui-tab layui-tab-brief" style="background-color: #fff;">
					<div class="layui-row">
						<div class="layui-inline layui-col-xs4 margin_r0">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">年份:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<input name="year" type="text" autocomplete="off" placeholder="请选择年份" cond-range-type="t_between" value="" class=" height_24 layui-input bo-search-field bo-search-field-year" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
								<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
							</div>
						</div>
						<div class="layui-inline layui-col-xs4 margin_r0">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">项目:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<input name="nameYear" type="text" autocomplete="off" placeholder="模糊匹配" cond-range-type="t_bothlike" value="" class=" height_24 layui-input bo-search-field" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
								<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
							</div>
						</div>
					</div>
					<ul class="layui-tab-title">
						<li class="layui-this" data-type="two" data-type-two="all">总数据</li>
						<li data-type="two" data-type-two="country">国家</li>
						<li data-type="two" data-type-two="shop">店铺</li>
						<li data-type="two" data-type-two="product">商品</li>
						<li data-type="two" data-type-two="product-youpin">优品</li>
						<li data-type="two" data-type-two="product-jingpin">精品</li>
						<li data-type="two" data-type-two="product-jingpinE">精品欧洲</li>
						<li data-type="two" data-type-two="product-jingpinN">精品北美</li>
						<li data-type="two" data-type-two="product-cate">商品种类</li>
						<li data-type="two" data-type-two="region">区域</li>
					</ul>

				</div>
			</div>
			<div class="layui-tab-item" data-type-one-content="month">
				<div class="layui-tab layui-tab-brief" style="background-color: #fff;">
					<div class="layui-row">
						<div class="layui-inline layui-col-xs4 margin_r0">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">月份:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<input name="month" type="text" autocomplete="off" placeholder="请选择月份" cond-range-type="t_between" value="" class=" height_24 layui-input bo-search-field bo-search-field-yyyymm" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
								<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
							</div>
						</div>
						<div class="layui-inline layui-col-xs4 margin_r0">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">项目:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<input name="nameMonth" type="text" autocomplete="off" placeholder="模糊匹配" cond-range-type="t_bothlike" value="" class=" height_24 layui-input bo-search-field" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
								<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
							</div>
						</div>
					</div>
					<ul class="layui-tab-title">
						<li class="layui-this" data-type="two" data-type-two="all">总数据</li>
						<li data-type="two" data-type-two="country">国家</li>
						<li data-type="two" data-type-two="shop">店铺</li>
						<li data-type="two" data-type-two="product">商品</li>
						<li data-type="two" data-type-two="product-youpin">优品</li>
						<li data-type="two" data-type-two="product-jingpin">精品</li>
						<li data-type="two" data-type-two="product-jingpinE">精品欧洲</li>
						<li data-type="two" data-type-two="product-jingpinN">精品北美</li>
						<li data-type="two" data-type-two="product-cate">商品种类</li>
						<li data-type="two" data-type-two="region">区域</li>
					</ul>
				</div>
			</div>
			<div class="layui-tab-item" data-type-one-content="day">
				<div class="layui-tab layui-tab-brief" style="background-color: #fff;">
					<div class="layui-row">
						<div class="layui-inline layui-col-xs4 margin_r0">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">日期:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<input name="day" type="text" autocomplete="off" placeholder="请选择日期" cond-range-type="t_between" value="" class=" height_24 layui-input bo-search-field bo-search-field-date" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
								<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
							</div>
						</div>
						<div class="layui-inline layui-col-xs4 margin_r0">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">项目:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<input name="nameDay" type="text" autocomplete="off" placeholder="模糊匹配" cond-range-type="t_bothlike" value="" class=" height_24 layui-input bo-search-field" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
								<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
							</div>
						</div>
					</div>
					<ul class="layui-tab-title">
						<li class="layui-this" data-type="two" data-type-two="all">总数据</li>
						<li data-type="two" data-type-two="country">国家</li>
						<li data-type="two" data-type-two="product-jingpin">精品</li>
						<li data-type="two" data-type-two="product-jingpinE">精品欧洲</li>
						<li data-type="two" data-type-two="product-jingpinN">精品北美</li>
						<li data-type="two" data-type-two="region">区域</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<table class="layui-hide" id="main_table" lay-filter="main_table"></table>
	<script type="text/javascript">
	$(function() {
		var height = window.innerHeight - 50;
	});
	function doReloadOne(type) {
		if(type == 'year') {
			
			var type2 = $('#id_year_tab').find('li.layui-this').attr('data-type');
			doReloadTwo(type2);
		}
		return;
	}
	function doReloadTwo(type) {
		layui.table.reload("main_table",{
			page: {
				curr: 1
			},
			where: {'type': type}
		})
		return;
	}
	</script>
					 
	<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<a id="id_filter_form_search" class="layui-btn layui-btn-normal layui-btn-xs search_btn"><i class="layui-icon layui-icon-search"></i> 查询</a>
		<button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-filter="filter_form_search_clear"><i class="layui-icon layui-icon-close"></i> 清空</button>
	</div>
	</script>
	
	<script th:inline="javascript">
	layui
		.extend({optimizeSelectOption: '/static/plugins/layui/extends/optimizeSelectOption/optimizeSelectOption'})
		.use(['form', 'element', 'table', 'dropdown', 'optimizeSelectOption', 'util', 'laydate'], function(){
		var element = layui.element;
		var table = layui.table;
		var dropdown = layui.dropdown;
		var form = layui.form;
		var util = layui.util;
		var $ = layui.jquery;
		var laydate = layui.laydate;
		
		// 创建渲染实例
		table.render({
			elem: '#main_table'
			,url:'[(${dto.menu.pathGridRequest})]' // 此处为静态模拟数据，实际使用时需换成真实接口
			,toolbar: '#toolbarDemo'
			,defaultToolbar: ['filter', 'print', {
					title: '导出数据'
					,layEvent: 'LAYTABLE_EXPORT_DATA'
					,icon: 'layui-icon-export'
				}, {
					title: '刷新页面'
					,layEvent: 'LAYTABLE_REFRESH'
					,icon: 'layui-icon-refresh'
				}]
			,height: window.innerHeight - 200 // 最大高度减去其他容器已占有的高度差
			,limit : 20
			,limits : [20,50,200,500]
			,where: getCondsMulty()
			,cellMinWidth: 95
			,totalRow: true // 开启合计行，true开启，false关闭
			,page: true
			,request: {
				pageName: 'page',
				limitName: 'size'
			}
			,skin: 'row'
			,even: true // 开启隔行背景
			,totalRow: true
			,cols: [ 
				[ {field:'name', width:200, title: '项目', sort: true}
			      ,{field:'time', width:200, title: '时间', sort: true}
			      ,{field:'num', width:200, title: '数量', sort: true}
			      ,{field:'percentNum', width:200, title: '数量占比(%)', sort: true}
			      ,{field:'amount', width:200, title: '金额', sort: true}
			      ,{field:'percentAmount', width:200, title: '金额占比(%)', sort: true}]
			 ]
			,done: function(res){
				var id = this.id;

				// 绑定查询按钮--表格重载成功后
				$('#id_filter_form_search').on('click', function(e){
					reloadTabelLocal();
				});
			}
			,error: function(res, msg){
				console.log(res, msg)
			}
		});
		
		// 工具栏事件
		table.on('toolbar(main_table)', function(obj){
			var id = obj.config.id;
			var checkStatus = table.checkStatus(id);
			var othis = lay(this);
			switch(obj.event){
				case 'LAYTABLE_REFRESH':
				{
					layer.confirm("确定刷新吗？",{
						btn: ['确定', '取消']
					}, function (index) {
						location.reload();
						layer.close(index);
					});
					break;
				}
				case 'LAYTABLE_EXPORT_DATA':
				{
					$.ajax({
						type: "POST",
						url: '[(${dto.menu.pathGridExportRequest})]',
						data: getCondsMulty(),
						success: function (data) {
							if (data.code == 0) {
								window.open(data.msg);
							} else {
								alert(data.msg);
							}
						}
					});
					break;
				}

			};
		});

		// 清空按钮
		form.on('submit(filter_form_search_clear)', function(data){
			layer.confirm("确定清空搜索条件吗？",{
				btn: ['确定', '取消']
			}, function (index) {
				$('form[name="searchForm"]').find('input[type=text],select').each(function() {
					$(this).val('');
				});
				layer.close(index);
			});
			return false;
		});
		
		//初始化搜索框-日期范围
		lay('.bo-search-field-date').each(function(){
			var myDate = new Date();
			var maxtime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + (myDate.getDate());
			laydate.render({
				elem: this
				, type: 'date'
				, max: maxtime
				, range: '~'
				//, max: maxtime//设置选择最大时间为当前
				, calendar: true
				, btns: ['clear', 'confirm', 'now']
				, done: function (value, date) {
					//这里时选中后触发事件
					//value是选中的值
					var time = value;
				}
			});
		});
		
		//初始化搜索框-年份
		lay('.bo-search-field-year').each(function(){
			var maxtime = new Date().getFullYear();
			laydate.render({
				elem: this
				, type: 'year'
				, range: '~'
				, max: maxtime//设置选择最大时间为当前
				, calendar: false
				, btns: ['clear', 'confirm']
				, done: function (value, date) {
					//这里时选中后触发事件
					//value是选中的值
					var time = value;
				}
			});
		});
		
		//初始化搜索框-月范围
		lay('.bo-search-field-yyyymm[cond-range-type="t_between"]').each(function(){
			var myDate = new Date();
			var maxtime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1);
			laydate.render({
				elem: this
				, type: 'month'
				, format: 'yyyy-MM'
				, range: '~'
				, max: maxtime
				//, max: maxtime//设置选择最大时间为当前
				, calendar: true
				, btns: ['clear', 'confirm', 'now']
				, done: function (value, date) {
					//这里时选中后触发事件
					//value是选中的值
					var time = value;
				}
			});
		});



		// 初始化一级菜单按钮点击事件
		$('li[data-type="one"]').on('click', function(event) {
			var conditions = getCondsBase();
			var typeOne = $(this).attr('data-type-one-tab');
			conditions['typeOne'] = typeOne;
			
			// 获取二级菜单值
			var selectedTwo = $('div[data-type-one-content="' + typeOne + '"]').find('.layui-this[data-type="two"]')[0];
			var typeTwo = $(selectedTwo).attr('data-type-two');
			conditions['typeTwo'] = typeTwo;
			layui.table.reload("main_table",{
				page: {
					curr: 1
				},
				where: conditions
			})
		});
		
		// 初始化二级菜单按钮点击事件
		$('li[data-type="two"]').on('click', function(event) {
			var conditions = getCondsMulty();
			var typeTwo = $(this).attr('data-type-two');
			conditions['typeTwo'] = typeTwo;

			conditions['nameYear'] = '';
			conditions['nameMonth'] = '';
			conditions['nameDay'] = '';
			$('input[name="nameYear"]').val('');
			$('input[name="nameMonth"]').val('');
			$('input[name="nameDay"]').val('');
			
			layui.table.reload("main_table",{
				page: {
					curr: 1
				},
				where: conditions
			})
		});
	});
	
	function showModal(colId) {
		var w=($(window).width()*0.9);
		var h=($(window).height() - 50);
		layer.open({
			type: 2,
			area: [w+'px', h +'px'],
			fix: true,
			maxmin: false,
			shadeClose: true,
			shade:0.4,
			title: "选择",
			content: '/toModalSelector?colId=' + colId
		});
	}

	/**
	* 重新加载表格
	*/
	function reloadTabelLocal() {
		$('.layui-this[data-type="one"]').each(function(index, dom){
			layui.table.reload("main_table",{
				page: {
					curr: 1
				},
				where: getCondsMulty()
			})
		});
	}

	/**
	* 获取基本搜索条件
	*/
	function getCondsBase() {
		var conditions = {};
		$(".bo-search-field").each(function(index, dom){
			conditions[$(this).attr('name')] = $(this).val();
		});
		
		return conditions;
	}

	/**
	* 获取复合搜索条件
	*/
	function getCondsMulty() {
		var conditions = getCondsBase();
		
		// 获取一级菜单值
		var selectedOne = $('.layui-this[data-type="one"]')[0];
		var typeOne = $(selectedOne).attr('data-type-one-tab');
		conditions['typeOne'] = typeOne;
		
		// 获取二级菜单值
		var selectedTwo = $('div[data-type-one-content="' + typeOne + '"]').find('.layui-this[data-type="two"]')[0];
		var typeTwo = $(selectedTwo).attr('data-type-two');
		conditions['typeTwo'] = typeTwo;
		
		return conditions;
	}
	
	// 
	$('body').on("mouseenter",".layui-table-body tr",function () {
	    $(this).siblings().find("div").css("color","#142A48");
	    $(this).find("div").css("color","#4DA1FF");
	})
	</script>
	<!-- 引用按钮自定义脚本 -->
	<th:block th:with="menuId=${dto.menuId}" th:include="include/gird-btn :: BTNScript(menuId)"/>
</body>
		
</html>